

import React, { Component } from 'react'
import { Popover, Flex } from 'antd-mobile'
import { LineChart, Line } from 'recharts'
import './../../css/week.css'
import store from './../../store/index'
const Item = Popover.Item;

export default class WeekWeather extends Component {
   constructor(props) {
      super(props)
      this.state = {
         clineWidth: 0,
         clineHeight: 0,
         weather: store.getState().weather,
         today: {},
         dataList: [],
      }
   }
   componentWillMount() {
      // console.log(JSON.stringify(this.state.weather))
      this.setState({
         clineWidth: document.documentElement.clientWidth,
         clineHeight: document.documentElement.clientHeight,
      }, () => {
         this.refs.week.style.height = this.state.clineHeight + 'px'
      })
   }
   componentDidMount() {
   }
   onSelect = (opt) => {
      let active = this.state.visible
      this.setState({
         visible: !active
      });
      if (opt.props.value === 'week') {
         this.props.history.push('/')
      } else if (opt.props.value === 'blog'){
         window.location.href = 'https://www.jiaoguoliang.com'
      }

   };
   handleVisibleChange = (visible) => {
      this.setState({
         visible
      });
   };
   render() {
      let styleColor = {
         color: '#fff'
      }
      let weekBg = {
         width: "100%",
         height: "100vh",
         background: '#eee',
         backgroundSize: "100% 100%"
      }
      return (
         <div ref='week' style={weekBg} className='week'>

            <Flex className='address'>
               <Flex.Item className='text-left'>
                  <span></span>
               </Flex.Item>
               <Flex.Item style={styleColor} className='text-center'>
                  <span style={{ color: '#333' }}>北京</span>
               </Flex.Item>
               <Flex.Item className='text-right'>
                  <Popover mask
                     overlayClassName="fortest"
                     overlayStyle={{ color: '#333' }}
                     visible={this.state.visible}
                     overlay={[
                        (<Item key="1" value="week" data-seed="week">今日天气</Item>),
                        (<Item key="2" value="blog" data-seed="blog">博客链接</Item>)
                     ]}
                     align={{
                        overflow: { adjustY: 0, adjustX: 0 },
                        offset: [-10, 0],
                     }}
                     onVisibleChange={this.handleVisibleChange}
                     onSelect={this.onSelect}
                  >
                     <div style={{
                        height: '100%',
                        padding: '0 15px',
                        marginRight: '-15px',
                        fontSize: '1.4rem',
                        color: '#333',
                        justifyContent: 'right'
                     }}
                     >
                        <span className='iconfont icon-liebiao1 address-detail'></span>
                     </div>
                  </Popover>
               </Flex.Item>
            </Flex>
            <div className='week-top'>
              <div className='list-dates'>
                {
                  this.state.weather.future.map((item,index) => {
                    return (
                      <div key={index}>
                        <p>{item.week}</p>
                        <p>{item.dates}</p>
                        <p className={item.weather_icon_fa}></p>
                        <p>{item.tempFisrt}℃</p>
                      </div>
                    )
                  })
                }
              </div>
              <LineChart 
                width={this.state.clineWidth + 10} 
                height={200} 
                data={this.state.weather.future}
                margin={{ top: 5, right: 40, left: 30, bottom: 5 }}
              >
                <Line type="monotone" dataKey="tempFisrt" stroke="#666" />
                <Line type="monotone" dataKey="tempLast" stroke="#111" />
              </LineChart>
              <div className='list-dates list-dates-2'>
                {
                  this.state.weather.future.map((item,index) => {
                    return (
                      <div key={index}>
                        <p className={item.weather_icon_fb}></p>
                        <p>{item.tempLast}℃</p>
                      </div>
                    )
                  })
                }
              </div>
            </div>
            <div className='btm-list'>
                {
                  this.state.weather.future.map((item,index) => {
                    return (
                      <div key={index} className='flex-row'>
                        <p>{item.dates}</p>
                        <p className={item.weather_icon_fa}></p>
                        <p>{item.tempLast}℃</p>
                        <p>{item.weather}</p>
                      </div>
                    )
                  })
                }
              </div>
         </div>
      )
   }
}